<template>
  <div>
    <div class="curr-page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ page_content }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ page_title }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 渲染内容 -->
      <div class="mt-4">
        <div v-if="show_obj.name == null">
          <el-empty :description="empty_content"></el-empty>
        </div>
        <div v-else>
          <!-- 店铺信息 -->

          <div>
            <el-descriptions title="店铺信息" column="4">
              <el-descriptions-item label="店铺名" span="4">
                {{ show_obj.name }}
              </el-descriptions-item>
              <el-descriptions-item label="店主">
                {{ show_obj.user[0].username }}
              </el-descriptions-item>
              <el-descriptions-item label="店龄">
                {{ show_obj.age || "暂无" }}
              </el-descriptions-item>
              <el-descriptions-item label="地址">{{
                show_obj.address || "暂无地址"
              }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div>
            <!-- 店铺车辆信息 -->
            <div class="mt-5">店铺车辆信息</div>
            <!-- 列表 -->
            <div class="mb-3" v-if="show_obj.cars.length != 0">
              <el-space wrap>
                <div
                  style="width: 240px;padding:0;margin-right:20px;margin-top:1.25rem"
                  v-for="(item, index) in show_obj.cars"
                  :key="index"
                >
                  <div>
                    <img
                      :src="item.icon"
                      alt=""
                      style="width:240px"
                      @click="seeCarDetail(item._id)"
                    />
                    <div>
                      <!-- 车名 -->
                      <!-- 超过一行省略号显示 -->
                      <div
                        class="fs-md"
                        style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                      >
                        {{ item.name }}
                      </div>

                      <div class="fs-xs">
                        <span>车龄{{ item.age }}年</span>
                        <span> | </span>
                        <span>{{ item.milage }}万里行程</span>
                      </div>
                      <div class="mt-1 text-red1 d-flex jc-between ai-center">
                        <span>成交价 {{ item.price }}万</span>
                        <!-- <router-link
                          :to="'/detail/shop/' + item.shopId"
                          v-slot="{ navigate }"
                          v-show="item.shopId"
                          custom
                        >
                          <el-button
                            @click="navigate"
                            class="text-black"
                            size="mini"
                            >进店逛逛</el-button
                          >
                        </router-link> -->
                      </div>
                    </div>
                  </div>
                </div>
              </el-space>
            </div>
          </div>

          <!-- {{ show_obj }} -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {},
  },

  data() {
    return {
      show_obj: {},
      page_title: "",
      page_content: "店铺详情",
      empty_content: "抱歉，当前店铺已丢失",
    };
  },

  methods: {
    // 页面初始化内容占位
    fetchInitData() {
      this.fetchShowObj();
    },

    // 获取渲染对象内容
    async fetchShowObj() {
      await this.$axios.get(`/shop/${this.id}`).then((res) => {
        console.log(res);
        this.show_obj = res.data[0];
        this.page_title = this.show_obj.name;
      });
    },
    seeCarDetail(car_id) {
      this.$router.push(`/detail/car/${car_id}`);
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  width: 1080px;
  margin: 0 auto;
  padding-top: 30px;
}
</style>
